<template>
  <div class="px-[30px] py-5 user-info min-h-full flex flex-col">
    <div class="border-b border-br pb-5">
      <span class="text-2xl font-medium">邀请组队</span>
    </div>
    <div>
      <div
          class="cursor-pointer"
          :key="data.id"
          @click="$router.push(`/competition/detail/${data.competitionId}`)"
      >
        <div class="border-b border-br py-4 flex items-center">
          <ElImage
              v-if="data.cover"
              class="flex-none w-[180px] h-[135px] mr-4"
              :src="data.cover"
              fit="cover"
          />
          <div class="flex-1">
            <div class="text-lg font-medium line-clamp-1">
              {{ data.name }}
              <span style="float: right;"><strong>{{data.inviteName}}</strong> 邀请你组队
<!--                <span v-if="data.applyType = 2">【男双打】</span>-->
<!--                <span v-else-if="data.applyType = 4">【女双打】</span>-->
<!--                <span v-else-if="data.applyType = 5">【男女混打】</span>-->
                  <el-tag type="success" v-if="data.applyType=='2'">男双打</el-tag>
                  <el-tag type="error" v-else-if="data.applyType=='4'">女双打</el-tag>
                  <el-tag type="danger" v-else-if="data.applyType=='5'">男女混打</el-tag>
              </span>
            </div>

            <div class="text-tx-regular line-clamp-2 mt-4">
              {{ data.description }}
            </div>
            <div
                class="mt-5 text-tx-secondary flex justify-between"
            >
              <div>
<!--                报名于：{{ data.createTime }} &nbsp;&nbsp;-->
                <span>
                报名时间：{{ data.registrationTime }} ~ {{ data.registrationEndTime }}
                </span>
              </div>
              <div>
                <span v-if="data.status==0">
                  <el-link :disabled="isDisabled()" :underline="false" type="danger" @click.stop="handelApplyAccept({id : data.id, type : 2})">拒绝</el-link>&nbsp;&nbsp;&nbsp;
                  <el-link :disabled="isDisabled()" :underline="false" type="success" @click.stop="handelApplyAccept({id : data.id, type : 1})">接受</el-link>
                </span>
                <span v-else-if="data.status==2">该邀请链接已失效</span>
                <span v-else>该队伍已邀请成功</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="py-4 flex justify-end">
        <el-pagination
            v-model:current-page="params.page_no"
            :total="data.count"
            :page-size="params.page_size"
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            @current-change="refresh()"
        />
      </div>
    </div>

<!--    <div class="flex flex-1 justify-center items-center" v-else>-->
<!--      <el-empty-->
<!--          :image="empty_news"-->
<!--          description="暂无收藏"-->
<!--          :image-size="250"-->
<!--      />-->
<!--    </div>-->
  </div>
</template>
<script lang="ts" setup>
import { ElImage, ElButton, ElPagination, ElEmpty } from 'element-plus'
import feedback from '~/utils/feedback'
import {useUserStore} from "~/stores/user";
import {acceptCompetitionApply, cancelCompetitionApply, getCompetitionApplyInvite} from "~/api/competition";
const route = useRoute()
const userStore = useUserStore()
const params = reactive({
  page_no: 1,
  page_size: 15
})

const { data, refresh } = await useAsyncData(() => getCompetitionApplyInvite(route.params.code), {
  initialCache: false
})
console.log(route.params.code)
console.log(data)
const handelApplyAccept = async ({id, type}: { id: any, type: any }) => {
  // const res =
  await acceptCompetitionApply({ id:id,type:type,teamNo:route.params.code })
  // if(type==1&&res.code==200){
  //   feedback.msgSuccess('已接受邀请')
  // }else{
  //   feedback.msgSuccess(res.msg)
  // }
  // if(type==2&&res.code==200){
  //   feedback.msgSuccess('已拒绝邀请')
  // }else{
  //   feedback.msgSuccess(res.msg)
  // }

  refresh()
}

const isDisabled = () => {
  if(data.status==2){
    return true;
  }
  let sex = userStore.userInfo?.sex=='男'?1:0;
  if(data.value.applyType=='5'){
    return data.value.sex == sex
  }else{
    return data.value.sex != sex
  }
}
</script>
<style lang="scss" scoped></style>
